<template>
  <main class="px-6 pb-6">
    <s-navs
      :navs="[
        'menu.visualization.ExpandChart',
        'menu.visualization.ExpandChart.Detail',
      ]"
    />
    <div class="s-section">
      <div>
        <span class="mx-2">图表编号:</span>
        <a-input
          :style="{ width: '220px' }"
          placeholder="请输入图表编号"
          allow-clear
        />
        <span class="mx-2">图表名称:</span>
        <a-input
          :style="{ width: '220px' }"
          placeholder="请输入图表名称"
          allow-clear
        />
        <span class="mx-2">图表类型:</span>
        <a-select :style="{ width: '320px' }" placeholder="请选择图表类型">
          <a-option>柱状图</a-option>
          <a-option>折线图</a-option>
          <a-option>饼图</a-option>
          <a-option disabled>禁用</a-option>
        </a-select>
      </div>
    </div>
    <div class="s-section mt-4">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" title="基本信息"><BasicInformation /></a-tab-pane>
        <a-tab-pane key="2" title="插件引用"><PluginReference /></a-tab-pane>
        <a-tab-pane key="3" title="图表脚本"><IconScript /></a-tab-pane>
        <a-tab-pane key="4" title="图表样式"><StyleScript /></a-tab-pane>
        <a-tab-pane key="5" title="自定义属性">
          <CustomAttribute />
        </a-tab-pane>
      </a-tabs>
    </div>
  </main>
</template>

<script setup lang="ts">
import BasicInformation from '@/components/dashboardComponents/BasicInformation.vue'
import PluginReference from '@/components/dashboardComponents/PluginReference.vue'
import IconScript from '@/components/CodingEditor/IconScript/index.vue'
import StyleScript from '@/components/CodingEditor/StyleScript/index.vue'
import CustomAttribute from '@/components/CodingEditor/CustomAttribute/index.vue'
</script>

<style lang="scss" scoped></style>
